<template>
    <div class="papaerStatistics" v-loading="loading">

        <!-- 基本信息 -->
        <div class="info" >
            <el-descriptions title="试卷信息">
                <el-descriptions-item label="试卷名称">{{ info.title }}</el-descriptions-item>
                <el-descriptions-item label="题目数量" v-if="info.list">{{ info.list.split(',').length }}</el-descriptions-item>
                <el-descriptions-item label="试卷时间">{{ info.time / 60000 }}分钟</el-descriptions-item>
                <el-descriptions-item label="分数上限">{{ level }}</el-descriptions-item>
                <el-descriptions-item label="试卷类型">
                    <el-tag size="small">{{ types[info.type] }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="时段区间" v-if="info.startTime">
                    {{ dayjs(info.startTime).format('YYYY-MM-DD HH:mm') }}
                    至
                    {{ dayjs(info.endTime).format('YYYY-MM-DD HH:mm') }}
                </el-descriptions-item>
            </el-descriptions>
        </div>

        <el-tabs type="border-card" style="background-color: #fff;border-radius: 10px;overflow: hidden;">
            <el-tab-pane label="统计">
                <!-- 数据统计 -->
                <div class="count">
                    <countItem v-for="(item, index) in counts" :item="item" class="count-item" :key="index"/>
                </div>

                <div class="echarts">
                    <!-- 曲线图 -->
                    <div id="line"></div>
                    <!-- <div id="bar"></div> -->
                    <div id="pie"></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="用户分数">
                <adminAnswerList :paperId="info.id" desc="fraction" v-if="info.id"/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import countItem from '@/components/base/countItem.vue'
import { mapState } from 'vuex'
import { getPaperStatistics } from '@/api/paper'
import adminAnswerList from '../answer/adminAnswerList.vue'
export default {
    components : {
        countItem,
        adminAnswerList
    },
    data(){
        return {
            info : {},
            level : 0,
            counts : [],
            loading : false,
            line : {
                xAxis: {
                    type: 'category',
                    // boundaryGap: false,
                    data: []
                },
                title: [
                    {
                        left: 'center',
                        text: '月活跃度'
                    }
                ],
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'line',
                        areaStyle: {},
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ])
                        },
                        smooth: true
                    }
                ]
            },
            bar : {
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                title: [
                    {
                        left: 'center',
                        text: '答题卡类型'
                    }
                ],
                series: [
                    {
                        data: [],
                        type: 'bar',
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#2378f7' },
                                    { offset: 0.7, color: '#2378f7' },
                                    { offset: 1, color: '#83bff6' }
                                ])
                            }
                        },
                    }
                ]
            },
            pie : {
                color : ['#909399', '#67C23A', '#F56C6C'],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '数量',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data : []
                    }
                ]
            },
        }
    },
    created(){
        this.getStatistics()
    },
    computed : {
        ...mapState(['types', 'limits', 'paperTimer'])
    },
    mounted(){
    },
    methods : {
        setOption(echarts, option){
            this.$echarts.init(document.getElementById(echarts)).setOption(option)
        },
        getStatistics(){
            this.loading = true
            getPaperStatistics(this.$route.query.id).then(res => {
                this.loading = false
                if(res.code == 200){

                    this.info = res.data.paper
                    this.level = res.data.level

                    this.counts = res.data.counts

                    this.line.xAxis.data = res.data.lineNames
                    this.line.series[0].data = res.data.lineValues
                    this.setOption('line', this.line)

                    this.bar.xAxis.data = res.data.barNames
                    this.bar.series[0].data = res.data.barValues
                    // this.setOption('bar', this.bar)

                    this.pie.series[0].data = res.data.pie
                    this.setOption('pie', this.pie)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@media screen and (max-width: 1000px) {
    .papaerStatistics{
        .count{
            flex-wrap: wrap !important;
        }
        .echarts{
            flex-direction: column;
            &>div{
                width: 100%;
            }
        }
    }
}
@media screen and (min-width: 1000px) {
    .papaerStatistics{
        padding: 0 20px;
        .echarts{
            // flex-direction: column;
            &>div{
                flex: 1;
            }
        }
    }
}
.papaerStatistics{
    border-radius: 10px;
    .info{
        width: 1200px;
        max-width: 100%;
        margin: 20px auto;
        padding: 40px;
        display: flex;
        transition: all 0.5s;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        background-color: #fff;
        cursor: pointer;
        border-radius: 10px;
        &:hover{
            box-shadow: 0 6px 36px 0 rgba(0, 0, 0, 0.2);
        }
    }
    .count{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px;
    }
    .echarts{
        display: flex;
        &>div{
            height: 400px;
        }
    }
}
</style>